<template>
    <div class="setting-button" @click="handleToogle">
        <i class="el-icon-setting"></i> 
    </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
    computed: {
       ...mapState({
           settingsControl: state => state.settings.settingsControl
       }) 
    },
    methods: {
        handleToogle() {
            if(this.flag) return;
            this.flag = true;
            
            this.$store.dispatch('changeSettings', {key: 'settingsControl', value: !this.settingsControl})
            .then(() => {
                this.flag = false;
            })
        },
    }
}
</script>

<style scoped>
.setting-button{
    cursor: pointer;
}
</style>